<template>
   <div class="cardAccountLayout integraLayout">
        <div class="seeIntegra">
            <div class="tableTitle">
            <div class="tableIcon"><img src="@/assets/img/flower_brown.png" alt=""></div>
            <div class="tableText">卡包总览</div>
            </div>
            <ul>
            <li v-for="(cardItem,index) in cardWallet" :key="index">
                <h2>{{cardItem.count}}</h2>
                <span>{{cardItem.status}}</span>
            </li>
            </ul>
        </div>
        <div>
            <div class="tableTitle">
                <div class="tableIcon"><img src="@/assets/img/flower_brown.png" alt=""></div>
                <div class="tableText">卡包明细</div>
            </div>
            <div class="formLayout">
                <el-table
                :data="cardDetailData">
                <el-table-column align="center" v-for="(item,index) in cardTableH" :label="item.label"  :prop="item.prop" :key="index"></el-table-column>
                </el-table>
            </div>
        </div>
        <div>
            <div class="tableTitle">
                <div class="tableIcon"><img src="@/assets/img/flower_brown.png" alt=""></div>
                <div class="tableText">使用历史</div>
            </div>
            <div class="formLayout">
                <el-table
                :data='cardHistoryData'
                >
                <el-table-column v-for="(item,index) in cardHistoryH" align="center" :label="item.label" :prop="item.prop" :key="index"></el-table-column>
                <!-- <el-table-column
                    fixed="right"
                    label="备注"
                    width="100">
                    <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="small">备注</el-button>
                    </template>
                </el-table-column> -->
                </el-table>
            </div>
        </div>
    </div>
</template>

<script>
import datas from '../datas.js'

export default {
    name:'cardInfo',
    data(){
        return{
            cardTableH:datas.cardTableH, //卡包账户 卡包明细表格 表头
            cardHistoryH:datas.cardHistoryH, //卡包账户 使用历史表格 表头
        }
    },
    props:{
        cardHistoryData:{
            type:Array
        },
        cardDetailData:{
            type:Array
        },
        cardWallet:{
            type:Array
        }
    }
}
</script>

<style scoped>
.seeIntegra ul,.seeTrade ul{
  display: flex;
  justify-content: center;
  height: 98px;
}
.seeIntegra ul li,.seeTrade ul li{
  width: 250px;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  margin-right: 22px;
  color: #fff;
  padding: 18px 0;
  border-radius: 8px
}
.seeIntegra ul li:first-child{
    background-image: linear-gradient(-90deg, 	#9db919 0%, 	#bcc92b 100%), linear-gradient(#ffffff, #ffffff);
    background-blend-mode: normal, normal;
}
.seeIntegra ul li:nth-child(2){
    background-image: linear-gradient(-90deg, #d85c30 0%, #e87d26 100%),
    linear-gradient( #e67828, #e67828);
    background-blend-mode: normal, normal;
}

.seeIntegra ul li:nth-child(3){
    background-image: linear-gradient(-90deg, #eab71b 0%, #edcb2a 100%),
    linear-gradient(#eab91d, #eab91d);
    background-blend-mode: normal, normal;
}
.seeIntegra ul li:last-child,seeTrade ul li:last-child{
      margin-right: 0
}
.seeIntegra ul li h2,.seeTrade ul li h2{
    font-size: 30px;
    /* margin-bottom: 26px; */
}
.seeIntegra ul li span,.seeTrade ul li span{
    color: #fff;
    font-size: 14px;
}
</style>



